<template>
	<div>
		<el-breadcrumb separator="/" class="registration-list">
		  <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item>订单管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="order-selected">
			<el-form ref="form" :inline="true" label-width="100px">
                <el-form-item style='width:250px' label="订单号：">
                    <el-input style='width:150px' v-model="ordernum" placeholder='请输入订单号'></el-input>
                </el-form-item>
                <el-form-item style='width:300px' label="订单状态：">
                    <el-select style='width:200px' @change='getStatus' v-model="status" placeholder="全部">
                        <el-option v-for='item in orderStatus' :key='item.status' :label="item.name" :value="item.status"></el-option> 
                    </el-select>
                </el-form-item>
                <el-form-item style='width:300px' label='支付方式:'>
                	<el-select style='width:200px' @change='getPayType' v-model="paytype" placeholder="全部">
                		<el-option  label="全部" value=""></el-option> 
                        <el-option  label="微信支付" value="2"></el-option> 
                        <el-option  label="积分支付" value="1"></el-option> 
                    </el-select>
                </el-form-item>
               <br/>
                <el-form-item label='下单时间：'>
                    <el-date-picker
                        v-model="selectDateStart"
                        @change='getStartDate'
                        type="date"
                        placeholder="选择起始时间">
                    </el-date-picker>
                    <el-date-picker
                        v-model="selectDateEnd"
                        @change='getEndDate'
                        type="date"
                        placeholder="选择结束时间">
                    </el-date-picker>
                </el-form-item> 
                <el-form-item style='width:200px' label='渠道:'>
                	<el-select style='width:100px' @change='getPayChannel' v-model="channel" placeholder="微信">
                        <el-option  label="微信" value="weixin"></el-option> 
                        <el-option  label="APP" value="app"></el-option> 
                        <el-option  label="小程序" value="XCX"></el-option>
                    </el-select>
                </el-form-item> 
            </el-form>
            <div class='check-btn'>
            	<el-button type="danger" class='clear-btn' @click='handleCleanData'>清空
				</el-button>
				<!-- <el-button type="primary" @click='getCountClick'>统计
				</el-button> -->
				<el-button type="primary" class='clear-btn' @click='handleCheckList'>查询</el-button>
			</div>
		</div>
		<div class="order-info">
			<div class="compute">
				<el-button type="primary" style='margin:5px 0;padding:8px 10px;' class='clear-btn' @click='handleClose'>批量关闭</el-button>
				<div class='count-money'>
					<span style="color:#000;font-size:16px;">订单合计</span>
					<span>订单数量：<b style="color:#f00;font-size:18px;">{{number}}</b></span>
					<span class="count-score">积分合计：<b style="color:#f00;font-size:18px;">{{score}}</b> 积分</span>
					<span>微信合计(&yen;)：<b style="color:#f00;font-size:18px;">{{money}}</b></span>
				</div>
			</div>
			 <el-table
		    :border='false'
		    :data='orderlist'
		    ref='table'
		    class='order-info-table'
		    @selection-change="handleSelectionChange"
		    style="width: 100%">
			    <el-table-column
		      type="selection"
		      :selectable="checkSelectable"
		      width='55%'
		      >
			  </el-table-column>
			    <el-table-column
			      label="票种"
			      style='position:relative'
			      >
			      <template scope="scope">
			      	<div class='order-num-info' style="box-sizing:border-box;padding-left:10px;width:405%;border-bottom:1px solid #ccc;background:#eee">订单号码：{{scope.row.ordernum}}</div>
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	<div v-for="value in scope.row.enrolllist">{{ value.ticketTitle }}</div>
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="价格"
			      >
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
				    	<div v-for="value in scope.row.enrolllist">
				    		<span v-if='value.money>0'>&yen;</span>
				    		<span v-if='value.money>0'>{{value.money}} </span>
				    		<span v-if='value.money>0&&value.score>0'>/</span>
				    		<span v-if='value.score>0'>{{value.score}}</span>
				    		<span v-if='value.score>0'>积分</span>
							<span v-if='!value.score>0&&!value.money>0'>-</span>
				    	</div>
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="数量"
			      >
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	   <div v-for="value in scope.row.enrolllist">{{ value.number }}</div>
			        </div>
			     </template>
			    </el-table-column>
				<el-table-column
			      label="渠道"
			      >
			      <template scope="scope">
					  	<div v-if="scope.row.channel=='weixin'">
			   				微信
			    	   	</div>
			    	    <div v-if="scope.row.channel=='XCX'">
			   				小程序
			    	   	</div>
			    	   	<div v-if="scope.row.channel=='app'">
			   				APP
			    	   	</div>
			     </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="订单状态"
			      style='position:relative'
			      >
			      	<template scope='scope'>
			      		<div class='order-num-info' style='background:#eee;width:430%;border-bottom:1px solid #ccc;'>活动名称：{{scope.row.title}}</div>
			      		{{scope.row.status}}
			  		</template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="昵称"
			      >
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	{{scope.row.username}}
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="openid"
			      width='120'
			      >
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	{{scope.row.openid}}
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="金额"
			       >
			       <template scope='scope'>
			       	<span v-if='scope.row.paytype==2'>{{scope.row.money}} 元</span>
			       	<span v-if='scope.row.paytype==1'>{{scope.row.score}} 积分</span>
			       	<span v-if='scope.row.paytype==0||scope.row.paytype==""'>-</span>
			       </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="支付方式"
			      width='100'
			      style='position:relative'
			      >
			       <template scope='scope'>
			       	<div class='order-num-info' style="background:#eee;width:266px;border-bottom:1px solid #ccc;">下单时间：{{scope.row.orderdate}}</div>
			       <span v-if='scope.row.paytype==2'>微信</span>
			       <span v-if='scope.row.paytype==1'>积分</span>
			       <span v-if='scope.row.paytype==0||scope.row.paytype==""'>-</span>
			   		</template>
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      width='100'
			      >
			      <template scope="scope">
			      	<router-link :to="{path:'/activity/list/check_order/'+scope.row.id,query:{activityId:id}}">
		        		<el-button type="text" size="small">查看</el-button>
		        	</router-link>
		        	<el-button type="text" @click="handleCloseOrder(scope.$index, scope.row)" size="small" v-show='scope.row.status=="已完成"||scope.row.status=="待付款"'>关闭</el-button>
		      </template>
		    </el-table-column>
	  </el-table>
	</div>
		<div class="block page-pagination">
	  	<el-pagination
	        :current-page="currentPage"
	        :page-sizes="pageSizes"
	        :page-size="pageSize"
	        @size-change='getPageSizes'
	        @current-change="handleCurrentChange"
	        layout="total, sizes, prev, pager, next"
		    :total="count">
		</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				id: this.$route.params.id,
				selectDateStart:'',
				selectDateEnd:'',
				ordernum:this.$route.query.ordernum ? this.$route.query.ordernum : '',
				status:'',
				paytype:'',
				number:null,
				channel:'weixin',
				money:null,
				score:null,
				currentPage:1,
				pageSizes:[10,15,20],
			    pageNum:1,
			    pageSize:10,
			    count:null,
			    orderlist:null,
			    checkedlist:[],
				orderIds:'',
				orderStatus:[{
					name:'全部',
					status:''
				},{
					name:'待审核',
					status:0
				},{
					name:'未通过',
					status:1
				},{
					name:'待付款',
					status:2
				},{
					name:'已完成',
					status:3
				},{
					name:'已核销',
					status:4
				},{
					name:'已取消',
					status:6
				}]
			}
		},
		methods:{
			getStartDate(val){
				this.selectDateStart = val
			},

			getEndDate(val){
				this.selectDateEnd = val
			},

			getPayType(val){
				this.paytype=val
			},

			getPageSizes(val){
				this.pageSize = val
				this.getOrderData()
			},

			getPayChannel(val){
				this.channel = val;
			},

			checkSelectable(row){
				return !(row.status!="待付款"&&row.status!="已完成")

			},

			handleCurrentChange(val){
				this.currentPage = val
				this.getOrderData()
			},

			handleSelectionChange(val){
				this.checkedlist = val
			},

			handleClose(){
				if (this.checkedlist.length>0) {
				this.$confirm('确定要批量关闭?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {

					for (let i = 0; i < this.checkedlist.length; i++) {
					this.orderIds += this.checkedlist[i].id+','
				}
		        	this.$http.post('marketweb/orderback/batchcloseOrder',{
		        		keyAdmin:this.$store.state.keyAdmin,
		        		orderIds:this.orderIds.slice(0,-1)
		        	}).then(response=>{
		        		if(response.body.code==200){
		        			this.$message({
				            type: 'success',
				            message: '关闭成功!'
				          });
		        			this.getOrderData()
		        		}else{
		        			this.$message.error(response.body.msg)
		        		}
		        	},response=>{
		        		this.$message.error('批量操作失败')
		        	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消操作'
		          });          
		        });
		    }else{
		    	this.$message.error('请选择要关闭的订单')
		    }
				this.orderIds = ''
			},
			handleCloseOrder(index,row){
				this.$confirm('确定要关闭此订单么?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'info'
	        }).then(() => {
	        	this.$http.post('marketweb/orderback/closeOrder',{
						keyAdmin:this.$store.state.keyAdmin,
						orderId:row.id
					}).then(response=>{
						if(response.body.code == 200){
							 this.$message({
				            type: 'success',
				            message: '关闭成功!'
				          });
							 this.getOrderData()
						}else{
							this.$message.error(response.body.msg)
						}
					},response=>{
						this.$message.error('关闭失败')
					})
				    }).catch(() => {
				      this.$message({
				        type: 'info',
				        message: '已取消操作'
				      });          
				    });
				},

			getCountClick(){
				this.getCountMoney()
			},

			getCountMoney(){
				this.$http.post('marketweb/orderback/statisticsActionOrders',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.id,
					ordernum:this.ordernum,
					orderdateStart:this.selectDateStart,
					orderdateEnd:this.selectDateEnd,
					paytype:this.paytype,
					channel:this.channel,
					userphone:this.ordernum
				}).then(response=>{
					if(response.body.code==200){
						this.number = response.body.number
						this.money = response.body.money
						this.score = response.body.score
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('请求失败')
				})
			},
			getOrderData(){
				this.$http.post('marketweb/orderback/queryActionOrders',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.id,
					pageNum :this.currentPage,
					pageSize:this.pageSize,
					ordernum:this.ordernum,
					status:this.status,
					channel:this.channel,
					orderdateStart:this.selectDateStart,
					orderdateEnd:this.selectDateEnd,
					paytype:this.paytype
				}).then(response=>{
					if(response.body.code == 200){
						this.orderlist = response.body.orderlist
						this.count = response.body.count
						for (var i = 0; i < this.orderlist.length; i++) {
							if(this.orderlist[i].status == 0){
								this.orderlist[i].status = '待审核'
							}else if(this.orderlist[i].status == 1){
								this.orderlist[i].status = '未通过'
							}else if(this.orderlist[i].status == 2){
								this.orderlist[i].status = '待付款'
							}else if(this.orderlist[i].status == 3){
								this.orderlist[i].status = '已完成'
							}else if(this.orderlist[i].status == 4){
								this.orderlist[i].status = '已核销'
							}else if(this.orderlist[i].status == 6){
								this.orderlist[i].status = '已取消'
							}
						}
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('请求失败')
				})
			},

			handleCheckList(){
				window.sessionStorage.selectDateStart = this.selectDateStart;
				window.sessionStorage.selectDateEnd = this.selectDateEnd;
				window.sessionStorage.ordernum = this.ordernum;
				window.sessionStorage.paytype = this.paytype;
				window.sessionStorage.status = this.status;
				window.sessionStorage.pageSize = this.pageSize;
				window.sessionStorage.currentPage = this.currentPage;
				this.getOrderData()
				this.getCountMoney()
			},

			handleCleanData(){
				this.ordernum = '',
				this.status = '',
				this.paytype = '',
				this.paytype = '',
				this.selectDateStart = '',
				this.selectDateEnd = ''
				window.sessionStorage.removeItem('ordernum')
				window.sessionStorage.removeItem('status')
				window.sessionStorage.removeItem('paytype')
				window.sessionStorage.removeItem('selectDateStart')
				window.sessionStorage.removeItem('selectDateEnd')
				window.sessionStorage.removeItem('pageSize')
				window.sessionStorage.removeItem('currentPage')
			},

			getStatus(val){
				this.status = val
			}
		},

		beforeRouteEnter (to, from, next) {
		    next(vm=>{
		      	if(from.name == 'CheckOrder'){
			        vm.ordernum = window.sessionStorage.ordernum?window.sessionStorage.ordernum:''
			        vm.paytype = window.sessionStorage.paytype?window.sessionStorage.paytype:''
			        vm.status = window.sessionStorage.status? parseInt(window.sessionStorage.status) :  ''
			        vm.currentPage = window.sessionStorage.currentPage ? parseInt(window.sessionStorage.currentPage):1
			        vm.pageSize = window.sessionStorage.pageSize ? parseInt(window.sessionStorage.pageSize) : 10
			        vm.selectDateStart = window.sessionStorage.selectDateStart&&window.sessionStorage.selectDateStart!='undefined'?window.sessionStorage.selectDateStart:''
			        vm.selectDateEnd = window.sessionStorage.selectDateEnd&&window.sessionStorage.selectDateEnd!='undefined'?window.sessionStorage.selectDateEnd:''
		      }else{
				window.sessionStorage.removeItem('ordernum')
				window.sessionStorage.removeItem('status')
				window.sessionStorage.removeItem('paytype')
				window.sessionStorage.removeItem('selectDateStart')
				window.sessionStorage.removeItem('selectDateEnd')
				window.sessionStorage.removeItem('pageSize')
				window.sessionStorage.removeItem('currentPage')
		      }
		      vm.getOrderData()
		      vm.getCountMoney()
		    })
		  	}
	}
</script>
<style scoped>
	.order-selected{
		padding: 5px;
		margin: 10px 0;
		position: relative;
		background: #eee;
	}
	.registration-list{
		padding:10px 0;
		margin-bottom: 10px;
		color: #569efe;
		border-bottom:1px solid #569efe;
		font-size: 16px;
	}
	.count-money{
		display:inline-block;
		margin-top: 10px;
		font-size:12px;
		color:#000;
	}
	.compute{
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		padding-right: 20px;
	}
	.count-money span{
		line-height: 1.5;
		margin: 0 10px;
	}
	.clear-btn{
		padding: 8px 10px;
	}
	.check-btn{
		position: absolute;
		right: 86px;
		bottom: 12px;
	}
	.page-pagination{
		min-width: 380px;
		float: right;
	}
	.order-info-table{
		margin:10px 0;
	}
	.order-num-info{
		position: absolute;
		left: -55px;
		top: 0;
		width: 210px;
		padding: 5px;
		z-index: 2;
		color: #000;
	}
	.el-form-item{
    margin-bottom: 6px;
  }
	.order-info{
		position: relative;
	}
</style>